<template>
    <div
        class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-xl dark:bg-stone-950 dark:border-gray-700 shadow-md">
        <div class="flex flex-col items-center">
            <!-- 博主头像 -->
            <el-image class="mb-6 ring-4 rounded-2xl w-11/12 shadow-inner" :src="blogSettingsStore.blogSettings.avatar">
                <template #error>
                    <div class="flex items-center w-full h-full justify-center">
                        <el-icon :size="180" color="#9ec1fb" class="is-loading">
                            <Avatar />
                        </el-icon>
                    </div>
                </template>
            </el-image>

            <!-- 博主昵称 -->
            <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{{ blogSettingsStore.blogSettings.author
                }}
            </h5>
            <el-tooltip content="我的邮箱" placement="bottom">
                <!-- 邮箱 有值显示，无值隐藏-->
                <span class="mb-5 text-sm text-gray-500 dark:text-gray-400"
                    :class="[blogSettingsStore.blogSettings.email ? '' : 'hidden']">{{
                blogSettingsStore.blogSettings.email }}</span>
            </el-tooltip>

            <el-tooltip content="介绍语" placement="bottom">
                <!-- 介绍语 -->
                <span class="mb-5 text-sm text-gray-500 dark:text-gray-400">{{
                blogSettingsStore.blogSettings.introduction }}</span>
            </el-tooltip>



            <!-- 文章数量、分类数量、标签数量、总访问量 -->
            <!-- flex 布局，justify-center 水平居中，gap-5 设置 flex 内子元素的间距 -->
            <div class="flex justify-center gap-5 mb-2">
                <!-- flex 布局，items-center 垂直居中，flex-col 设置子元素上下排列，hover: 用于设置鼠标移动到上面的样式，字体颜色、scale-110 放大效果，cursor-pointer 指定鼠标移动到上面为小手指样式 -->
                <div @click="router.push('/archive/list')"
                    class="flex items-center flex-col gap-1 hover:text-blue-700 hover:scale-110 cursor-pointer dark:text-white">
                    <CountTo :value="statisticsInfo.articleTotalCount" customClass="text-lg font-bold"></CountTo>
                    <div class="text-sm">文章</div>
                </div>
                <div @click="router.push('/category/list')"
                    class="flex items-center flex-col gap-1 hover:text-blue-700 hover:scale-110 cursor-pointer dark:text-white">
                    <CountTo :value="statisticsInfo.categoryTotalCount" customClass="text-lg font-bold"></CountTo>
                    <div class="text-sm">分类</div>
                </div>
                <div @click="router.push('/tag/list')"
                    class="flex items-center flex-col gap-1 hover:text-blue-700 hover:scale-110 cursor-pointer dark:text-white">
                    <CountTo :value="statisticsInfo.tagTotalCount" customClass="text-lg font-bold"></CountTo>
                    <div class="text-sm">标签</div>
                </div>
                <div class="flex items-center flex-col gap-1 dark:text-white">
                    <CountTo :value="statisticsInfo.pvTotalCount" customClass="text-lg font-bold"></CountTo>
                    <div class="text-sm">总访问量</div>
                </div>
            </div>
            <!-- 第三方平台主页跳转（如 GitHub 等） -->
            <div class="flex justify-center gap-2">
                <el-tooltip content="我的Github" placement="bottom" v-if="blogSettingsStore.blogSettings.githubHomepage">
                    <!-- GitHub -->
                    <svg-icon name="github" v-if="blogSettingsStore.blogSettings.githubHomepage"
                        class="icon w-7 h-7  mt-5 hover:scale-110"
                        @click="jump(blogSettingsStore.blogSettings.githubHomepage)"></svg-icon>
                </el-tooltip>
                <el-tooltip content="我的Gitee" placement="bottom" v-if="blogSettingsStore.blogSettings.giteeHomepage">
                    <!-- Gitee -->
                    <svg-icon name="gitee" v-if="blogSettingsStore.blogSettings.giteeHomepage"
                        class="icon w-7 h-7  mt-5 hover:scale-110"
                        @click="jump(blogSettingsStore.blogSettings.giteeHomepage)"></svg-icon>
                </el-tooltip>
                <el-tooltip content="我的知乎" placement="bottom" v-if="blogSettingsStore.blogSettings.zhihuHomepage">
                    <!-- 知乎 -->
                    <svg-icon name="zhihu" v-if="blogSettingsStore.blogSettings.zhihuHomepage"
                        class="icon w-7 h-7  mt-5 hover:scale-110"
                        @click="jump(blogSettingsStore.blogSettings.zhihuHomepage)"></svg-icon>
                </el-tooltip>
                <!-- CSDN -->
                <el-tooltip content="我的CSDN" placement="bottom" v-if="blogSettingsStore.blogSettings.csdnHomepage">
                    <svg-icon name="csdn" v-if="blogSettingsStore.blogSettings.csdnHomepage"
                        class="icon w-7 h-7  mt-5 hover:scale-110"
                        @click="jump(blogSettingsStore.blogSettings.csdnHomepage)">
                    </svg-icon>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useBlogSettingsStore } from '@/stores/blogsettings'
// import { initTooltips } from 'flowbite'
import { onMounted, ref } from 'vue'
import { getStatisticsInfo } from '@/api/frontend/statistics'
import CountTo from '@/components/CountTo.vue'
import router from '@/router'
import { Avatar } from '@element-plus/icons-vue'

// 初始化 Flowbit 组件
// onMounted(() => {
//     initTooltips();
// })

// 引入博客设置信息 store
const blogSettingsStore = useBlogSettingsStore()

const jump = (url) => {
    // 在新窗口访问新的链接地址
    window.open(url, '_blank');
}

// 统计信息(文章、分类、标签数量、总访问量)
const statisticsInfo = ref({})
getStatisticsInfo().then(res => {
    if (res.success) {
        statisticsInfo.value = res.data
    }
})
</script>